.l-draggable{
    @active__color:rgba(115, 170, 229,.5);
    padding: 10px;
    position: absolute;
    cursor: move;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    &__mask{
      width:100%;
      height: 100%;
      border: 0;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1;
    }
    &--active{
      cursor: move;
      border:1px dashed #09f;
      background-color: @active__color;
    }
    &--move{
      opacity: .6;
      background-color:@active__color;
    }
    &--click{
      cursor: pointer;
    }
    &__line{
      &--left {
        position: absolute;
        border-top: 1px dashed #09f;
        width: 10000px;
        height: 0;
        top: 0;
        transform: translateX(-100%);
      }
      &--top {
        position: absolute;
        border-left: 1px dashed #09f;
        width: 0;
        height: 10000px;
        left: 0;
        transform: translateY(-100%);
      }
      &--label{
        top:-5px;
        left: -8px;
        position: absolute;
        padding: 5px;
        transform: translate(-100%,-100%);
        color: #09f;
        font-size: 18px;
        white-space: nowrap;
        cursor: move;
      }
    }
    &__menu{
      position: absolute;
      top:0px;
      left: 0px;
      background-color: #409EFF;
      font-size: 25px;
      color:#fff;
      z-index:9999;
      cursor: pointer;
    }
    &__range{
      @calcheight:-6px;
      position: absolute;
      width:10px;
      height: 10px;
      border-radius: 100%;
      z-index:9999;
      background-color: #09f;
      &--left,&--right{
        &:hover{
          cursor:ew-resize 
        }
        top:50%;
        transform: translateY(-50%);
      }
      &--left{
        left: @calcheight;
      }
      &--right{
        right: @calcheight;
      }
      &--top,&--bottom{
        &:hover{
          cursor: ns-resize
        }
        left: 50%;
        transform: translateX(-50%);
      }
      &--top{
        top: @calcheight;
      }
      &--bottom{
        bottom: @calcheight;
      }
      &--bottom-right,&--top-left{
        &:hover{
          cursor: nwse-resize
        }
      }
      &--bottom-left,&--top-right{
        &:hover{
          cursor: nesw-resize
        }
      }
      &--top-right{
        top: @calcheight;
        right:@calcheight;
      }
      &--top-left{
        top: @calcheight;
        left:@calcheight;
      }
      &--bottom-right{
        bottom: @calcheight;
        right:@calcheight;
      }
      &--bottom-left{
        bottom: @calcheight;
        left:@calcheight;
      }
    }
  }